<script type="text/x-template" id="cider-socialprofile">
    <div class="content-inner artist-page profile-page">
        <div class="artist-header" :style="getArtistPalette(data)">
            <div class="row">
                <div class="col-sm" style="width: auto;">
                    <div class="artist-image">
                        <mediaitem-artwork
                                shadow="large"
                                :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                size="220" type="artists"></mediaitem-artwork>
                    </div>
                </div>
                <div class="col cider-flex-center">
                    <h1>{{ data.attributes.name }}</h1>
                </div>
            </div>
        </div>
        <div class="artist-body">
            <template v-if="data.relationships && data.relationships['shared-playlists']">
                <div class="row">
                    <div class="col">
                        <h3>{{ 'Shared Playlists' ?? ""}}</h3>
                    </div>
                    <div class="col-auto cider-flex-center"
                         v-if="data.relationships['shared-playlists'].data.length >= 10">
                        <button class="cd-btn-seeall"
                                @click="app.showCollection(data.relationships['shared-playlists'],'Shared Playlists' ?? '', 'default')">
                            {{app.getLz('term.seeAll')}}
                        </button>
                    </div>
                </div>
                <mediaitem-square :item="item" v-for="item in data.relationships['shared-playlists'].data.limit(10)">
                </mediaitem-square>
            </template>
        </div>
    </div>
</script>
<script>
  Vue.component('cider-socialprofile', {
    template: "#cider-socialprofile",
    props: ['data'],
    data: function() {
      return {
        topSongsExpanded: false,
        app: this.$root
      }
    },
    methods: {
      getArtistPalette(artist) {
        if (artist?.attributes?.artwork != null) {
          return {
            "background": "#" + artist["attributes"]["artwork"]["bgColor"],
            "color": "#" + artist["attributes"]["artwork"]["textColor1"],
          }
        } else {
          return {
            "background": "#000000",
            "color": "#ffffff",
          }
        }
      },
      getTopResult() {
        if (this.search.results["meta"]) {
          return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
        } else {
          return false;
        }
      }
    }
  })
</script>
